import styled from 'styled-components';
import logoPic from './../../statics/nav-logo.png'


import {createGlobalStyle} from 'styled-components';


export const GlobalStyle = createGlobalStyle`
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	    margin: 0;
	    padding: 0;
	    border: 0;
	    font-size: 100%;
	    font: inherit;
	    vertical-align: baseline;
	}
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
	    display: block;
	}
	body {
	    line-height: 1;
	}
	ol, ul {
	    list-style: none;
	}
	blockquote, q {
	    quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	    content: '';
	    content: none;
	}
	table {
	    border-collapse: collapse;
	    border-spacing: 0;
	}
`

export const HeaderWrapper = styled.div`
	position: relative;
	height: 56px;
	border-bottom: 1px solid #f0f0f0;
`;
export const Logo = styled.a`
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 56px;
	width: 100px;
	background:  url(${logoPic});
	background-size: contain;
`;
export const Nav = styled.div`
	width: 945px;
	height: 56px;
	margin: 0 auto;
	color: #33333;
`;
export const NavItem = styled.div`
	line-height: 56px;
	padding: 0 15px;
	font-size: 17px;
	&.left{
		float: left;
	}
	&.right{
		float: right;
		color: #969696;
	}
	&.active{
		color: #ea6f5a;
	}

`;
export const SearchWrapper = styled.div`
	position: relative;
	float: left;	
	.iconfont{
		position: absolute;
		right: 5px;
		bottom: 5px;
		width: 30px;
		height: 30px;
		border-radius: 15px;
		background: #eee;
		text-align: center;
		line-height: 30px;
		&.focused{
			background: #777;
			color: #fff;
		}
	}
`;
export const NavSearch = styled.input.attrs({
	placeholder: '搜索'
})`
	width: 160px;
	height: 38px;
	padding: 0px 40px 0px 20px;
	margin-top: 9px;
	margin-left: 20px;
	border: none;
	outline: none;
	border-sizing: border-box;
	border-radius: 19px;
	background: #eeeeee;
	font-size: 14px;
	&.focused{
		width:240px;
	}
	&.slide-enter {
		width:160px;
		transition: all .2s ease-out;
	}
	&.slide-enter-active {
		width:240px
	}
	&.slide-exit {
		transition: all .2s ease-out;
	}
	&.slide-exit-active {
		width:160px
	}
`;
export const SearchInfo = styled.div`
	position: absolute;
	left: 0;
	top: 56px;
	background: #eee;
	width: 240px;
	padding: 0 20px;
	box-shadow: 0 0 8px rgba(0, 0, 0, .2);
`;
export const SearchInfoTitle = styled.div`
	margin-top: 20px;
	margin-bottom: 15px;
	line-height: 20px;
	font-size: 14px;
	color: #969696;
`;
export const SearchInfoSwitch = styled.span`
	float:right;
	font-size:14px;
`;
export const SearchInfoList = styled.div`
	overflow:hidden;
`;
export const SearchInfoItem =styled.a`
	display: block;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	line-height: 20px;
	padding: 0 5px;
	font-size: 12px;
	border: 1px solid #ddd;
	color: #787878;
	border-radius:2px;
`;

export const Addition = styled.div`
	position: absolute;
	right: 0;
	top: 0;
	height: 56px;

`;
export const RegisterButton = styled.div`
	margin: 9px 20px 0px 20px;
	float: right;
	line-height: 38px ;
	border-radius:19px;
	border: 1px solid #ea6f5a;
	&.reg{
		width: 80px;
		text-align: center;

	}
	&.writing{
		text-align: center;
		width: 100px;
		background: #ea6f5a;
		color: #fff;
	}
`
